<template>
    <view class="smart-page">
        <!--页面标题头begin-->
        <view class="smart-page-head">
            <view class="smart-page-head-title">input输入控件</view>
        </view>
        <!--页面标题头end-->
        <view>
            <view>可自动获取焦点</view>
            <view><input class="smart-input" focus="true" placeholder="请输入手机号"></view>
        </view>
        <view>
            <view>右下角显示搜索</view>
            <view><input class="smart-input" confirm-type="search" placeholder="输入要搜索的内容"></view>
        </view>
        <view>
            <view>控制最大输入长度</view>
            <view><input class="smart-input" maxlength="5" confirm-type="search" placeholder="请输入内容"></view>
        </view>
        <view>
            <view>密码输入</view>
            <view><input class="smart-input" password="true" confirm-type="search" placeholder="请输入内容"></view>
        </view>
        <view>
            <view>可查看密码</view>
            <view class="wrapper">
                <input class="smart-input" :password="showPassword" placeholder="请输入密码">
                <image class="eye" src="../../static/eye.png" @click="changePassword()"></image>
            </view>
        </view>
        <view>
            <view>同步获取</view>
            <view><input class="smart-input" @input="onKeyInput"></view>
            <view><text>{{inputValue}}</text></view>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                showPassword: true,
                inputValue: ''
            }
        },
        methods: {
            /*显示隐藏密码*/
            changePassword() {
                console.log('点击......');
                this.showPassword = !this.showPassword;
            },
            /*输入事件*/
            onKeyInput(event) {
                console.log(event.detail.value);
                this.inputValue = event.detail.value;
            }
        }
    }
</script>
<style>
.eye{
	width: 74upx;
	height: 74upx;
}
.wrapper{
	display: flex;
}
</style>



